<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import VirtualList from "./VirtualList.svelte";
    import { Link, Paragraph } from "../Typography";
    import Space from "../Space/Space.svelte";
    import img from "/src/assets/logo.svg";

    const { Story } = defineMeta({
        title: "Components/Views/VirtualList",
        component: VirtualList,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    export const createArray = (count: number) => {
        return new Array(count).fill(true).map((_, index: number) => {
            return {
                id: index,
                value: 1 + Math.round(Math.random() * 20),
                text: `Row ${index}`,
            };
        });
    };

    const data1 = createArray(10000);
</script>

<Story name="Default">
    {#snippet template(args)}
        {#snippet itemRender(item: any, index: number, props: any)}
            <div
                role="listitem"
                class={{
                    ListItemOdd: index % 2 === 0,
                    ListItemEven: index % 2 === 1,
                }}
                {...props}
            >
                <div>{item.text}</div>
            </div>
        {/snippet}
        <div style="width: 300px; border: 1px solid #ccc">
            <VirtualList height={300} items={data1} itemEstimatedSize={20} {itemRender} />
        </div>
    {/snippet}
</Story>

<Story name="DynamicHeight">
    {#snippet template(args)}
        {#snippet itemRender(item: any, index: number, props: any)}
            <div
                style={`height: ${30 + item.value}px`}
                role="listitem"
                class={{
                    ListItemOdd: index % 2 === 0,
                    ListItemEven: index % 2 === 1,
                }}
                {...props}
            >
                <div>{item.text}</div>
            </div>
        {/snippet}
        <div style="width: 300px; border: 1px solid #ccc">
            <VirtualList height={300} items={data1} itemEstimatedSize={20} {itemRender} />
        </div>
    {/snippet}
</Story>
